<template>
  <div class="app-drawer">
    <el-drawer
      :title="'为“'+tenantName+'”租户设置应用'"
      lock-scroll
      :direction="direction"
      :modal-append-to-body="false"
      :size="size"
      append-to-body
      class="avue-dialog"
      :visible.sync="drawer"
      @close="close"
    >
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-input v-model.trim="queryParams.appName" placeholder="输入搜索应用名称" style="width:200px;"
                    clearable="" maxlength="30" @blur="getList"
                    @keyup.enter.native="getList" @clear="getList" />
          <el-button v-permission="['CLIENT_MANAGE_SELECT_APP_BUTTON']" size="small" icon="el-icon-plus"
                     type="primary" @click="createAdministrator()">
            选择应用
          </el-button>
        </div>
        <dt-table
          v-loading="loading"
          :table-opts="tableOpts"
          :is-show-column="false"
          :pagination-data="{
            total:total,
            queryParams:queryParams
          }"
          @pagination="getList"
          @searchChange="handleQuery"
          @searchReset="handleReset"
        />
      </div>
      <!-- <div class="app_body">
        <div v-for="(appTypeItem,index) in appData" :key="index" class="appType">
          <div class="app_type_title">
            {{ appTypeItem.appType }}
          </div>
          <div class="app_item_body">
            <el-row :gutter="24">
              <el-col v-for="(appItem,appIndex) in appTypeItem.appList" :key="appIndex" :span="12">
                <div class="appItem">
                  <div class="top">
                    <appIcon :icon-type="appItem.iconType" :app-icon="appItem.appIcon" :active-color="appItem.iconColor" />
                    <div class="title"> -->
      <!-- 处理超长显示 -->
      <!-- {{ appItem.appName }}
                    </div>
                  </div>
                  <div class="bottom">
                    <el-tooltip class="item" effect="dark" :content="appItem.remark" placement="bottom-start">
                      <span class="content">{{ appItem.remark }}</span>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
            </el-row>

          </div>
        </div>
      </div> -->
    </el-drawer>
    <selectApp ref="selectAppRef" @saveData="saveData" />
  </div>
</template>
<script>
// import appIcon from '@/framework/views/system/applicationMag/components/appIcon.vue'
import clientManageApi from '@/framework/api/clientManage'
import selectApp from './selectApp.vue'

export default {
  components: {
    selectApp
    // appIcon
  },
  dicts: ['appSource'],
  data() {
    return {

      drawer: false,
      direction: 'rtl',
      clientListLength: 0,
      listLoading: true,
      tableData: [],
      total: 0,
      open: false,
      appData: [],
      selectAppData: [],
      tenantName: '',
      aa: '',
      loading: false,
      tableOpts: {
        rowKey: 'roleId',
        toolbarBtn: [
        ],
        firstTableCol: {
          select: false,
          width: 70
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'appName',
            label: '应用名称',
            show: true
          },
          {
            prop: 'appCode',
            label: '应用编码',
            show: true
          },
          {
            prop: 'appSource',
            label: '应用来源',
            labelWidth: '110px',
            show: true,
            type: 'dict',
            formatter: () => { return this.dict.type.appSource }
          },
          {
            prop: 'remark',
            label: '描述',
            show: true
          }
        ],
        operator: {
          fixed: 'right',
          align: 'center',
          width: 80,
          operatorBtn: [
            {
              text: '删除',
              permission: ['CLIENT_MANAGE_DELETEAPP_BUTTON'],
              type: 'danger',
              click: (row, col, cellValue) => {
                return this.handleDelete(row)
              }
            }
          ]
        },
        tableData: []
      },
      queryParams: {
        appName: '',
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    size() {
      return this.$store.getters.device === 'mobile' ? '375px' : '960px'
    }
  },
  created() {
  },
  methods: {
    close() {
      this.drawer = false
      this.queryParams = {
        appName: '',
        pageNo: 1,
        pageSize: 10
      }
    },
    handleDelete(row) {
      this.$dtMessageBox({ title: '提示', message: `确定要删除“${row.appName}”吗?`, type: 'warning' }).then(() => {
        clientManageApi.deleteTenantApp({ appId: row.appId, tenantId: this.queryParams.tenantId }).then((res) => {
          this.getList()
          this.$dtMessage({
            message: '删除成功',
            type: 'success'
          })
        }).catch(() => {
        // 取消不做操作
        })
      })
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        appName: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    // 搜索
    handleQuery(formModel) {
      this.queryParams = Object.assign(this.queryParams, formModel)
      this.queryParams.pageNo = 1
      this.getList()
    },
    openDrawer(row) {
      this.tenantName = row.tenantName
      this.drawer = true
      this.queryParams.tenantId = row.tenantId
      this.getList()
    },
    // 获取租户应用列表
    getList() {
      clientManageApi.tenantAppList(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        // this.appData = res.data
        // let tempSelect = []
        // this.appData.map(item => {
        //   if (item.appList && item.appList.length > 0) {
        //     tempSelect = [...tempSelect, ...item.appList]
        //   }
        // })
        this.selectAppData = res.data.rows
      })
    },
    createAdministrator() {
      this.$refs.selectAppRef.openSelect(this.selectAppData)
    },
    saveData(appIds) {
      if (!appIds || appIds.length === 0) {
        this.$dtMessage({
          title: '失败',
          message: '请至少选择一项应用',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.showScreenLoading()
      clientManageApi.setTenantApp(this.queryParams.tenantId, appIds).then((Response) => {
        this.$dtModal.msgSuccess('设置成功')
        this.$refs.selectAppRef.cancel()
        this.getList()
        this.hideScreenLoading()
      }).catch(() => {
        this.hideScreenLoading()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// .avue-dialog{
// font-size: 18px;
// font-weight: 500;
// color: #1D2129;
// line-height: 24px;

// }
// .app_body{
//   padding: 0px 90px;
//   .appType{
//     .app_type_title{
//       color: #131414;
//       font-size: 16px;
//       margin-bottom: 24px;
//     }
//     .app_item_body{

//       // display: flex;
//     }
//     .appItem{
//       // flex: 1;
//       width: 378px;
//       height: 130px;
//       background: #FFFFFF;
//       border-radius: 12px 12px 12px 12px;
//       opacity: 1;
//       border: 1px solid #EBEEF5;
//       margin-bottom: 24px;
//       padding: 16px;
//       .top{
//         display: flex;
//         height: 48px;
//         .el-image{
//           width: 40px;
//           height: 40px;
//           margin-right: 12px;
//         }
//         .title{
//           flex: 1;
//           font-size: 14px;
//           line-height: 40px;
//           color: #131414;
//           font-weight: 500;
//           margin-left: 13px;
//         }
//       }
//       .bottom{
//         font-weight: 300;
//         color: #606266;
//         font-size: 12px;
//         margin-top: 10px;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         display: -webkit-box;
//         -webkit-line-clamp: 2;
//         -webkit-box-orient: vertical;
//       }
//     }
//   }
// }
// .content{
//   margin: 0;
//   display: -webkit-box;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 2;
//   overflow: hidden;
//   font-size: 12px;
//   line-height: 17px;
//   font-weight: 400;
//   color: #646A73;
//   line-height: 20px;
//   word-wrap: break-word;
// }
.table-container{
  padding: 20px;
  margin: 0 auto;
}
.table-opt-container {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}
::v-deep .el-drawer__header{
  height: 64px;
  line-height: 64px;
  border-bottom: 1px solid #F2F5F8;
  padding: 20px;
  margin-bottom: 24px;
  color: #1D2129;
  font-size: 18px;
}

</style>
